import { useContext, useEffect, useState } from 'react';
import { useMediaPredicate } from 'react-media-hook';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import BackButton from 'src/component/BackButton';
import Button from 'src/component/Button';
import Pagination from 'src/component/Pagination';
import Tabs from 'src/component/Tabs';
import { MediaQuery } from 'src/constant/Media';
import { Page } from 'src/constant/Page';
import { ThemeContext } from 'src/context/ThemeContext';
import { usePagination } from 'src/hook/usePagination';
// import { OpenOrder } from 'src/model/Order';
import { getAdGoods } from 'src/service/orderService';
import TradeCard from './component/TradeCard';
import TradeTable from './component/TradeTable';
import style from './TradeAsk.module.scss';

import { openSnackbar } from 'src/redux/uiSlice';

type OpenOrder = {
  FID: string,
  FCNY: string,
  FGoods: string,
  FMax: number,
  FMin: number,
  FPrice: number
  FQuantity: number,
  FUserName: string,
  FWay: string,
}

const TradeAsk = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const isBiggerThanMd = useMediaPredicate(MediaQuery.Md);
  const { IcEmpty } = useContext(ThemeContext).image;
  const [refresh, setRefresh] = useState<boolean>(false);
  const [openOrders, setOpenOrders] = useState<OpenOrder[]>();
  const [allDatas, setAllDatas] = useState<OpenOrder[]>([]);
  const { limit, offset, setCount, paginationProps } = usePagination();

  useEffect(() => {
    const token = localStorage.getItem('token')
    getAdGoods({ token: token }).then(res => {
      if (res.success) {
        setAllDatas(res.list)
        setCount(res.list.length);
      } else {
        dispatch(openSnackbar({ message: res.message, severity: 'alert' }))
      }
    }).catch(e => {
      dispatch(openSnackbar({ message: e, severity: 'alert' }))
    })
  }, [refresh, limit]);

  useEffect(() => {
    if (allDatas?.length < 0) return
    let len = offset + limit
    let data = allDatas.slice(offset, len)
    setOpenOrders(data);
  }, [offset, limit, allDatas])


  const onNavigate = (path: Page) => () => {
    navigate(path);
  };

  return (
    <div>
      <div className={style.backButton}>
        <BackButton />
      </div>

      <div className={style.heading}>
        所有广告
        <div className={style.buttons}>
          <Button appearance="text" className={style.logout} onClick={onNavigate(Page.MyTrade)}>
            我的广告
          </Button>

          <Button appearance="text" className={style.logout} onClick={onNavigate(Page.Trading)}>
            发布广告
          </Button>
        </div>
      </div>

      <div className={style.headingBlock}>
        <Tabs labels={['USDT']} />
        <div className={style.buttons}>
          <Button
            appearance="outlined"
            className={style.logout}
            onClick={() => setRefresh(!refresh)}
          >
            重新整理
          </Button>
        </div>
      </div>
      <div className={style.transactionBlock}>
        {openOrders?.length === 0 && (
          <div className={style.emptyImg}>
            <img src={IcEmpty} />
          </div>
        )}
        {openOrders &&
          openOrders.length > 0 &&
          (isBiggerThanMd ? <TradeTable data={openOrders} /> : <TradeCard data={openOrders} />)}
      </div>
      <div className={style.pagination}>
        <Pagination {...paginationProps} />
      </div>
    </div>
  );
};

export default TradeAsk;
